@import 'variable';
.ui-card {
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all .3s linear;
  &:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
  .card-header,
  .card-content {
    padding: 20px;
  }
  .card-footer {
    padding: 0 20px 20px 20px;
    .button {
      color: #fff;
      background-color: #6c757d;
      border-radius: 4px;
      +.button {
        margin-left: 20px;
      }
      &:hover {
        background-color: #4e555b;
      }
    }
    .main-button {
      color: #fff;
      background-color: $theme;
      &:hover {
        background-color: darken($theme, 5%);
      }
    }
  }
}